<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>07_事件处理</title>
	</head>
	<body>
		<!--
			1. 绑定监听:
			  v-on:xxx="fun"
			  @xxx="fun"
			  @xxx="fun(参数)"
			  默认事件形参: event
			  隐含属性对象: $event

			2. 事件修饰符:
			  .prevent : 阻止事件的默认行为 event.preventDefault()
			  .stop : 停止事件冒泡 event.stopPropagation()
			  
			3. 按键修饰符
			  .keycode : 操作的是某个keycode值的健
			  .enter : 操作的是enter键
		-->

		<div id="example">

			<h2>1. 绑定监听</h2>
			<button @click="test1">test1</button>
			<button @click="test2('gqzdev')">test2</button>
			<button @click="test3('vuedev', $event)">test3</button>

			<h2>2. 事件修饰符</h2>
			<!-- 阻止事件默认行为 prevent -->
			<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
			
			<!-- 嵌套事件 -->
			<div style="width: 200px;height: 200px;background: red" @click="test5">
				<!-- 阻止事件传播 冒泡 propagation   stop -->
				<div style="width: 100px;height: 100px;background: blue" @click.stop="test6">				 </div>
			</div>

			<h2>3. 按键修饰符</h2>
			<input type="text" @keyup="test8" />
			
			<input type="text" @keyup.13="test7">
			
			<!-- keyup键盘事件  alt event ctrl down  -->
			<input type="text" @keyup.enter="test7">

		</div>

		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#example',
				data: {

				},
				methods: {
					test1(event) {
						alert(event.target.innerHTML)
					},
					test2(msg) {
						alert(msg)
					},
					test3(msg, event) {
						alert(msg + '---' + event.target.textContent)
					},

					test4(event) {
						// event.preventDefault();
						alert('点击了链接');
					},

					test5() {
						alert('out')
					},
					test6(event) {
						// event.stopPropagation();
						alert('inner')
					},
					
					test7(event) {
						console.log(event.keyCode)
						alert(event.target.value)
					},
					
					test8(event){
						if(event.keyCode===13){
							alert(event.target.value);
						}
					}
					
				}
			})
		</script>
	</body>
</html>
